<template>
  <div class="page-content">
    <div class="condition">
      <div class="condition-content">
        <Form ref="queryForm" label-position="right" :model="queryForm" inline>
          <Row>
            <Col span="6">
              <FormItem label="系统名称：" prop="systemId" :labelWidth="100">
                <Select v-model="queryForm.systemId" filterable>
                  <Option
                    v-for="system in systemList"
                    :value="system.id"
                    :label="system.name"
                    :key="system.id"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="角色：" prop="roleId" :labelWidth="100">
                <Select v-model="queryForm.roleId" filterable>
                  <Option
                    v-for="role in roleList"
                    :value="role.id"
                    :label="role.name"
                    :key="role.id"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="账户：" prop="sysDesc" :labelWidth="100">
                <Input type="text" v-model="queryForm.account" placeholder="账户" />
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="query('queryForm')">查询</Button>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="handlerReset('queryForm')">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div class="operation">
      <Row>
        <Col span="24">
          <Button type="primary" @click="openAddPage">新增</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openResetPage">重置密码</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openDelPage">删除</Button>
        </Col>
      </Row>
    </div>
    <div class="content">
      <Table
        border
        stripe
        :columns="columns"
        :data="data"
        height="480"
        highlightRow
        @on-row-click="rowClick"
      >
        <template slot="footer">
          <Page
            show-total
            :total="total"
            @on-change="pageChange"
            show-sizer
            :pageSizeOpts="[5,10,15,20]"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </template>
      </Table>
    </div>
    <!--添加页面-->
    <Modal
      title="添加"
      :closable="true"
      :maskClosable="true"
      v-model="addPageFlag"
      @on-ok="addOK('addForm')"
      @on-cancel="addCancel('addForm')"
    >
      <Form ref="addForm" :model="tmpForm">
        <FormItem label="账号：" prop="account" :labelWidth="100">
          <Input type="text" v-model="tmpForm.account" placeholder="账号" />
        </FormItem>
        <FormItem label="姓名：" prop="name" :labelWidth="100">
          <Input type="text" v-model="tmpForm.name" placeholder="姓名" />
        </FormItem>
        <FormItem label="邮箱：" prop="email" :labelWidth="100">
          <Input type="text" v-model="tmpForm.email" placeholder="邮箱" />
        </FormItem>
        <FormItem label="手机号：" prop="phone" :labelWidth="100">
          <Input type="text" v-model="tmpForm.phone" placeholder="手机号" />
        </FormItem>
      </Form>
    </Modal>
    <!--维护-->
    <Modal title="添加" :closable="true" :maskClosable="true" v-model="addMaintainPageFlag">
      <query-system-role :userId="maintainUserId"></query-system-role>
    </Modal>
  </div>
</template>
<script>
import {
  queryUserApi,
  addUserApi,
  resetPasswordApi,
  delUserApi,
} from '@/api/user'
import { getSystemListApi } from '@/api/system'
import { getRolesBySystemIdApi } from '@/api/roles'
import querySystemRrole from './query-system-role'
import QuerySystemRole from './query-system-role.vue'
export default {
  name: 'user-manager',
  data() {
    return {
      queryForm: {
        systemId: '',
        roleId: '',
        account: '',
      },
      //系统列表
      systemList: [],
      //角色列表
      roleList: [],
      tmpForm: {}, //添加用户时需要临时容器去装载
      resetUserId: '', //需要重置密码的用户ID
      delId: '', //需要删除的用户ID
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '账号',
          key: 'account',
        },
        {
          title: '名称',
          key: 'name',
        },
        {
          title: '邮箱',
          key: 'email',
        },
        {
          title: '手机号',
          key: 'phone',
        },
        {
          title: '创建时间',
          key: 'genTime',
        },
        {
          title: '操作',
          key: 'operation',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                },
                on: {
                  click: () => this.view(params),
                },
              },
              ['维护']
            )
          },
        },
      ],
      data: [], //用户数据
      total: 0,
      addPageFlag: false, //添加页面模态窗口标志
      addMaintainPageFlag: false,
      tblCurIndex: undefined, //选中角标
      tblCurData: {}, //选中数据,
      maintainUserId: '',
    }
  },
  components: {
    QuerySystemRole,
  },
  methods: {
    query(name) {
      let condition = this.$refs[name].model

      var param = {}
      param.condition = condition
      param.page = this.page
      queryUserApi(param)
        .then((response) => {
          this.data = response.data
          this.total = response.page.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handlerReset(name) {
      this.$refs[name].resetFields()
    },
    pageChange(pageNum) {
      this.page.pageNum = pageNum
      this.query('queryForm')
    },
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.query('queryForm')
    },
    openAddPage() {
      this.addPageFlag = true
    },
    openResetPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择用户')
        return
      }
      this.$Modal.confirm({
        title: '重置密码',
        content: '请确认是否需要给' + this.tblCurData.name + '用户重置密码?',
        onOk: this.resetOK,
      })
    },
    openDelPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择需要删除用户')
        return
      }
      this.$Modal.confirm({
        title: '删除用户',
        content: '请确认是否要删除' + this.tblCurData.name + '用户?',
        onOk: this.delOK,
      })
    },
    addOK(name) {
      addUserApi(this.tmpForm).then((data) => {
        this.$refs[name].resetFields()
        this.$Message.success('添加用户成功')
        this.query('queryForm')
      })
    },
    resetOK() {
      let param = {}
      param.id = this.tblCurData.id
      resetPasswordApi(param)
        .then((data) => {
          this.$Message.success('重置密码成功')
        })
        .catch((error) => console.log(error))
    },
    delOK() {
      let param = {}
      param.id = this.tblCurData.id
      delUserApi(param)
        .then((data) => {
          this.$Message.success('删除成功')
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    addCancel(name) {
      this.$refs[name].resetFields()
    },
    rowClick(data, index) {
      this.tblCurIndex = index
      this.tblCurData = data
    },
    view({ row }) {
      this.maintainUserId = row.id
      this.addMaintainPageFlag = true
    },
  },
  created: function () {
    getSystemListApi()
      .then((data) => {
        this.systemList = data
      })
      .catch((error) => console.log(error))
  },
  watch: {
    'queryForm.systemId': function (systemId) {
      if (systemId == undefined || systemId == '') {
        this.roleList = []
      } else {
        getRolesBySystemIdApi(systemId)
          .then((data) => {
            this.roleList = data
          })
          .catch((error) => console.log(error))
      }
    },
  },
}
</script>
<style lang="less" scoped>
.page-content > .condition {
  border: 1px solid #b8c7cb;
}

.page-content > .condition > .condition-content {
  margin-top: 10px;
}

.page-content > .operation {
  margin-top: 15px;
  background-color: rgba(113, 182, 114, 0.1);
}
</style>